import React from 'react';

import Homeindex from './Root/Home/Index';
import Learn from './Root/Learn/Learn';
import Square from './Root/Square/Square';
import SignUp from './Root/SignUp/SignUp';
import User from './Root/User/User';


import {
  Route,
  Switch,
  HashRouter as Router,NavLink
} from 'react-router-dom';

const components={
    "Homeindex":Homeindex,
    "Learn":Learn,
    "Square":Square,
    "SignUp":SignUp,
    "User":User,
}

export default class App extends React.Component {
    constructor(props){
        super(props)
        this.state = {
           routes:[{
                    path:"/home/home/index",
                    component:'Homeindex',
                    name:"发现",
                },{
                    path:"/home/learn/learn",
                    component:'Learn',
                    name:"我的学习",
                },{
                    path:"/home/square/square",
                    component:'Square',
                    name:"广场",
                },{
                    path:"/home/signup/signup",
                    component:'SignUp',
                    name:"报名",
                },{
                    path:"/home/user/user",
                    component:'User',
                    name:"我的",
                },
            ],
        };
    }
    render() {
        return (
            <React.Fragment>
                <Router>
                    <Switch>
                        {this.state.routes.map((item,index)=>{
                            return(
                                <Route key={index} path={item.path} component={components[item.component]} ></Route>
                            )
                        })}
                        {/* <Route path="/home/home/index" component={Homeindex} />
                        <Route path="/home/equip/index" component={Equip} />
                        <Route path="/home/merchant/index" component={Merchant} />
                        <Route path="/home/finance/index" component={Finance} /> */}
                    </Switch>
                </Router>
                <div className='tabbar'>
                    {this.state.routes.map((route,index)=>{
                        return(
                            <NavLink
                                exact
                                to={route.path}
                                activeClassName="active"
                                className="tabbar_item"
                                key={index}
                            >
                                <p className={route.component}>{route.name}</p>
                            </NavLink>
                        );
                    })}
                </div>
            </React.Fragment>
        );
    }
}
